<template>
  <el-container class="container">
    <!-- 左侧树 -->
    <el-aside class="left" width="30%">
        <el-tree 
          :data="data"
          highlight-current
          :props="defaultProps"
          accordion
          node-key="label"
          ref="tree"
          @node-click="handleNodeClick"
          ></el-tree>
    </el-aside>
    <!-- 右侧容器 -->
    <el-container style="flex-flow:column;" class="right">
      <el-row class="btns">
        <!-- <el-button type="primary" class="add" round @click="dialogFormVisible = true">添加标签</el-button> -->
        <el-tag @click="addTag" effect="dark">添加标签</el-tag>
        <el-tag type="success" effect="dark" @click="updateTag">修改标签</el-tag>
        <el-tag type="danger" effect="dark" @click="delTag">删除标签</el-tag>
      </el-row>
      <el-card class="box-card" v-show="card.show">
        <el-row slot="header">
          <el-col :span="21" class="el-card_title">{{card.name}}-{{card.tag}}</el-col>
          <el-col :span="3" class="clearfix">
            <el-button type="text" @click="addSource">添加</el-button>
          </el-col>
        </el-row>
        <div class="text item">
          <el-row :gutter="10" v-for="(resource, index) in resources" :key="index">
            <el-row>
              <el-col :span="6" class="label">主机</el-col>
              <el-col :span="18" class="val">{{ resource.address }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="label">IP</el-col>
              <el-col :span="18" class="val">{{ resource.ip }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="label">用户名</el-col>
              <el-col :span="18" class="val">{{ resource.user }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="label">密码</el-col>
              <el-col :span="18" class="val">{{ resource.pwd }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="label">备注</el-col>
              <el-col :span="18" class="val">{{ resource.desc }}</el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="6" :offset="18">
                <el-tag type="danger" style="cursor:pointer;" @click="delResource(resource)">删除</el-tag>
              </el-col>
            </el-row>
            <el-divider class="divider"></el-divider>
          </el-row>
          <!-- {{item.text}} -->
        </div>
      </el-card>
      <!-- 添加标签 -->
      <el-dialog title="标签管理" 
        :visible.sync="dialogFormVisible" 
        @opened="openTagDialog"
        >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          size="small"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="项目" prop="name">
            <el-select v-model="ruleForm.name" placeholder="请选择项目" :disabled="tagDialogState === 'edit'">
              <el-option 
                :label="project.name"
                v-model="project.name"
                v-for="(project,index) in projects"
                :key="index"
                >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" prop="tag">
            <el-input v-model="ruleForm.tag"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 添加资源 -->
      <el-dialog title="资源管理" :visible.sync="dialogFormVisibleSource" top="0" custom-class="dialog">
        <el-form
          :model="ruleFormSource"
          :rules="rulesSource"
          ref="ruleFormSource"
          label-width="80px"
          class="demo-ruleForm"
          size="small"
        >
          <el-form-item label="项目">
            <el-select v-model="ruleFormSource.name" placeholder="请选择项目" prop="name" disabled>
              <el-option 
                :label="project.name"
                v-model="project.name"
                v-for="(project,index) in projects"
                :key="index"
                >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" prop="tag">
            <el-input v-model="ruleFormSource.tag" disabled></el-input>
          </el-form-item>
          <el-form-item label="主机" prop="address">
            <el-input v-model="ruleFormSource.address"></el-input>
          </el-form-item>
          <el-form-item label="IP" prop="ip">
            <el-input v-model="ruleFormSource.ip"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="user">
            <el-input v-model="ruleFormSource.user"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="ruleFormSource.pwd"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="desc">
            <el-input type="textarea" v-model="ruleFormSource.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitFormSource('ruleFormSource')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-container>
  </el-container>
</template>

<script>
const pdb = require('../../lowdb/project') // 项目数据库
const rdb = require('../../lowdb/resource') // 资源数据库
export default {
  name: 'types',
  data () {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      card: {
        name: '',
        tag: '',
        show: false
      },
      tagDialogState: '',
      projects: [], // 项目列表
      dialogFormVisible: false, // 标签表单状态
      dialogFormVisibleSource: false, // 资源表单状态
      ruleForm: {
        name: '', // 项目名称
        tag: '' // 标签
      },
      rules: {
        name: [{ required: true, message: '请选择项目', trigger: 'change' }],
        tag: [{ required: true, message: '请填写标签', trigger: 'blur' }]
      },
      ruleFormSource: {
        id: '',
        name: '', // 项目名称
        tag: '', // 标签
        address: '', // 主机
        ip: '', // IP
        user: '', // 用户
        pwd: '', // 密码
        desc: '' // 备注
      },
      rulesSource: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'change' },
          { min: 1, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        address: [{ required: true, message: '请填写主机', trigger: 'blur' }],
        ip: [{ required: false, message: '请填写IP', trigger: 'blur' }],
        user: [{ required: false, message: '请填写用户名', trigger: 'blur' }],
        pwd: [{ required: false, message: '请填写密码', trigger: 'blur' }],
        desc: [{ required: false, message: '请填写备注', trigger: 'blur' }]
      },
      resources: []
    }
  },
  created () {
    this.initTree()
  },
  methods: {
    handleNodeClick (data, node, curnode) {
      if (node.isLeaf && node.level !== 1) { // 是子节点且等级不等于1(1为根节点)
        let parent = curnode.$parent.node.data.label
        this.card.name = parent
        this.card.tag = data.label
        this.card.show = true
        let list = rdb.queryList(this.card) // 查询资源
        if (list !== undefined) {
          this.resources = list.children
        } else {
          this.resources = []
        }
      } else {
        // this.card.projects = data.label
      }
    },
    initTree () {
      this.projects = pdb.queryList()
      let treeData = []
      this.projects.forEach(element => {
        treeData.push({ label: element.name, children: element.children })
      })
      this.data = treeData
    },
    // 添加/修改标签表单校验
    submitForm (formName) {
      let self = this
      self.$refs[formName].validate(valid => {
        if (valid) {
          if (self.tagDialogState === 'add') {
            pdb.addTag(self.ruleForm)
          } else if (self.tagDialogState === 'edit') {
            pdb.updateTag(self.ruleForm, self.card.tag)
            this.card.show = false
          }
          this.$message({
            message: '保存成功',
            duration: 1000,
            type: 'success'
          })
          self.initTree()
          self.dialogFormVisible = false
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // 修改数据
    handleEdit (index, row) {
      this.ruleForm = row
      this.dialogFormVisible = true
      this.formState = 'edit'
    },
    // 删除数据
    handleDelete (index, row) {
      pdb.delItem(row)
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.queryList()
    },
    // 修改标签
    updateTag () {
      let self = this
      self.tagDialogState = 'edit'
      let curnode = self.$refs.tree.getCurrentNode()
      console.log(curnode)
      if (curnode === null) {
        this.$message({
          message: '请选择标签',
          type: 'warn'
        })
      } else {
        let isParent = curnode.hasOwnProperty('children') // 是否为根节点
        if (isParent) {
          this.$message({
            message: '请选择子节点',
            type: 'warn'
          })
        } else {
          this.ruleForm = {
            name: self.card.name,
            tag: self.card.tag
          }
          self.dialogFormVisible = true
        }
      }
    },
    // 添加标签
    addTag () {
      this.dialogFormVisible = true
      this.tagDialogState = 'add'
    },
    // 添加标签弹窗打开
    openTagDialog () {
      if (this.tagDialogState === 'add') {
        this.$refs.ruleForm.resetFields()
        this.ruleForm = {}
      }
    },
    // 删除标签
    delTag () {
      pdb.delTag(this.card)
      this.card.show = false
      let curnode = this.$refs.tree.getCurrentNode()
      this.$refs.tree.remove(curnode)
    },
    // 添加资源
    addSource () {
      this.dialogFormVisibleSource = true
      this.ruleFormSource.name = this.card.name
      this.ruleFormSource.tag = this.card.tag
    },
    // 添加/修改标签表单校验
    submitFormSource (formName) {
      let self = this
      self.$refs[formName].validate(valid => {
        if (valid) {
          // if (self.tagDialogState === 'add') {
          //   pdb.addTag(self.ruleForm)
          // } else if (self.tagDialogState === 'edit') {
          //   pdb.updateTag(self.ruleForm, self.card.tag)
          //   this.card.show = false
          // }
          rdb.addItem(self.ruleFormSource)
          this.$message({
            message: '保存成功',
            duration: 1000,
            type: 'success'
          })
          // self.initTree()
          self.dialogFormVisibleSource = false
          self.ruleFormSource = {}
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    delResource (resource) {
      rdb.delItem(this.card, resource)
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 10px;
}
.clearfix {
  display: flex;
  flex-direction: row;
  align-items: right;
}
.left {
  border-right:1px solid #DCDFE6;
}
.box-card {
  width: 100%;
}
.el-card {
  padding-bottom: 10px;
  margin-bottom: 10px;
  overflow: visible;
}
.right {
  padding: 10px;
  overflow-y:auto;
}
.btns {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
  min-height: 40px;
}
.btns span{
  margin-left: 10px;
  cursor: pointer;
}
.divider {
  margin: 5px 0;
}
.label {
  padding: 5px 0;
  text-align: right;
}
.val {
  padding: 5px 0;
  text-align: left;
  padding-left: 15px;
}
</style>
